import React from 'react';
import { render } from 'react-dom';

import { Table, Divider, Tag, Icon, Button, Modal, Popconfirm } from 'antd';

export class ThumbnailViewComponent extends React.Component {
    constructor(props) {
        super();
        this.state.previewImage = props.previewImage;
        this.state.thumbnail = props.thumbnail;
        this.state.heigth = props.heigth;
    }

    state = {
        previewVisible: false,
        previewImage: '',
        thumbnail: '',
        width: null,
        height: null,
    };

    openModal = () => {
        this.setState({
            modalVisible: true,
        });
    }

    handleCancel = () => this.setState({ previewVisible: false });

    viewImage = ()=>{
        this.setState({ previewVisible: true });
    };

    render() {
        const { previewVisible, previewImage, thumbnail, heigth } = this.state;
        let thumbnailStyle = {cursor:"pointer"};
        if (heigth) {
            thumbnailStyle.height = heigth + "px";
        }else {
            thumbnailStyle.width = "100%";
        }
        return (
            <div> 
                <img alt="thumbnail" src={thumbnail} style={thumbnailStyle} onClick={this.viewImage} title="view large picture"/>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </div>
        );
    };
}
